<template>
    <div>
         <LoginHeader>
        <i class="el-icon-arrow-left" slot="i" @click="goback"></i>
        <span slot="title">生日</span>
        <span slot="more"></span>
        </LoginHeader>
        <div class="age">
        <!-- <div id="trigger4">选择生日</div> -->

        <input type="date" v-model="data" >
        <br>
         <el-button @click="ageput">确定</el-button>
        </div>
    </div>
</template>
<script>
import LoginHeader from '@/components/njrcomponents/login_header.vue'
export default {
    data(){
        return{
            data:'2017-07-05'
        }
    },
 components:{
        LoginHeader
    },
    methods:{
        goback(){
            this.$router.go(-1)
        },
        ageput(){
            this.$http.put('/api/users/'+this.$store.state.id,{age:this.data})
            .then(({
                data,config
            })=>{
                if(data.code==200){
                this.$message.success('修改生日成功')
                }else{
                    this.$message.error('修改生日失败')
                }
            })
        }
    },
    mounted(){
        this.$http.get('/api/users/'+this.$store.state.username)
        .then(({
            data,config
        })=>{
            if(data.code==200){
                this.data=data.data.age
            }else{
                this.$message.error('获取出生信息失败')
            }
        })
    //      var mobileSelect4 = new MobileSelect({
    //             trigger: "#trigger4",
    //             title: "选择生日",
    //             wheels: [
    //                {data:['1998年','1999年','2000年','2001年','2002年','2003年','2004年']},
    //             {data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}
    //         ],
    // position:[1,1],
    //             callback:function(indexArr, data){
    //                 console.log(data);
    //             }
    //         });
    }
}
</script>
<style lang="less" scoped>
.age{
    text-align: center;
    margin-top: 100px;
    .el-button{
        margin-top: 50px;
        width: 40%;
        border-radius: 30px;

    }
}
</style>
<style lang="less" >
.mobileSelect .content .btnBar .cancel, .mobileSelect .content .btnBar .ensure {
    height: 0.6rem;
    width: 0.93333rem;
    cursor: pointer;
    position: absolute;
    top: 0;
}
</style>